<template>
  <div class="directly-wrapper">
    <el-dialog
      title="选择车辆"
      class="tableDialog tableFormDialog"
      :close-on-click-modal="false"
      :visible.sync="directlyVisible">
      <div class="directly-content">
        <div class="content-left">
          <div class="content-left-header">
            <el-tabs v-model="activeName"  @tab-click="handleClick">
              <el-tab-pane label="选择车辆" name="first">
                <div class="select-car">
                  <div class="select-car-search">
                    <el-select ref="truckGroupSelection" clearable v-model="value" placeholder="请选择分组" filterable @change="handleGroupSelection">
                      <el-option
                       v-loading="groupLoading"
                        v-for="item in options"
                        :key="item.id"
                        :label="item.names"
                        :value="item.id">
                      </el-option>
                    </el-select>
                    <el-input
                      placeholder="输入车牌号搜索"
                      class="search-num"
                      clearable
                      @clear="handleTruckSearch"
                      v-model="input1">
                      <i
                          class="el-icon-search el-input__icon"
                          slot="suffix"
                          @click="handleTruckSearch">
                        </i>
                    </el-input>
                  </div>
                  <div class="select-car-table">
                    <el-table
                      v-loading="truckListLoading"
                      :data="carNumData"
                      stripe
                      border
                      @selection-change="(selection)=> handleSelect(selection, 'carNum')"
                      :row-key="getRowKeys"
                      ref="carNumTable"
                      style="width: 100%">
<!--                      @select="(selection, row)=> handleCheckBoxSelect(selection, row, 'carNum')"-->
<!--                      @select-all="(selection)=> handleSelectAll(selection, 'carNum')"-->

                      <el-table-column type="index" label="序号" width="60"></el-table-column>
                      <el-table-column prop="truckNumber" label="车牌号" min-width="150"></el-table-column>
                      <el-table-column prop="axle.axle" label="车轴类型" width="149"></el-table-column>
                      <el-table-column
                        type="selection"
                        align="center"
                        width="50">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="select-car-bottom">
                    <el-pagination
                      @size-change="handleCarNumSizeChange"
                      @current-change="handleCarNumCurrentChange"
                      :current-page.sync="page.pageNo"
                      :page-size="page.pageSize"
                      background
                      layout="total,prev, pager, next"
                      :total="page.total">
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="选择分组" name="second">
                <div class="select-group">
                  <div class="select-group-search">
                    <el-input
                      placeholder="输入车牌号搜索"
                      suffix-icon="el-icon-search"
                      class="search-num"
                      v-model="input2">
                    </el-input>
                  </div>
                  <div class="select-group-table">
                    <el-table
                      v-loading="groupListLoading"
                      :data="groupData"
                      stripe
                      border
                      ref="groupTable"
                      @selection-change="(selection)=> handleSelect(selection, 'group')"
                      :row-key="getRowKeys"
                      style="width: 100%">
<!--                        @select="(selection, row)=> handleCheckBoxSelect(selection, row, 'group')"-->
<!--                        @select-all="(selection)=> handleSelectAll(selection, 'group')"-->
                      <el-table-column type="index" label="序号" width="60"></el-table-column>
                      <el-table-column prop="names" label="分组名称" min-width="299"></el-table-column>
                      <el-table-column
                        type="selection"
                        align="center"
                        width="50">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="select-group-bottom">
                    <el-pagination
                      @size-change="handleGroupSizeChange"
                      @current-change="handleGroupCurrentChange"
                      :current-page.sync="page2.pageNo"
                      :page-size="page2.pageSize"
                      background
                      layout="total, prev, pager, next"
                      :total="page2.total">
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

        </div>
        <div class="content-right">
          <div class="selected-car">
            <div class="selected-total">
              <p>已选车辆(<span>{{this.selectedCarNumTags.length}}</span>)</p>
            </div>
            <div class="selected-detail">
              <div class="selected-detail-box">
                <el-tag
                  :key="tag.id"
                  :label="tag.truckNumber"
                  :value="tag.id"
                  v-for="tag in selectedCarNumTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag, 'carNum')">
                  {{tag.truckNumber}}
                </el-tag>
              </div>
            </div>
          </div>
          <div class="selected-group">
            <div class="selected-total">
              <p>已选车辆分组(<span>{{this.selectedGroupTags.length}}</span>)</p>
            </div>
            <div class="selected-detail">
              <div class="selected-detail-box">
                <el-tag
                  :key="tag.id"
                  :label="tag.names"
                  :value="tag.id"
                  v-for="tag in selectedGroupTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag
                  , 'group')">
                  {{tag.names}}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom-form">
          <el-form :model="numberForm" ref="numberForm" :inline="true">
              <el-form-item label="每辆车可运输次数:" required>
                  <el-input-number v-model="numUnexecuted" controls-position="right" @change="handleChange"></el-input-number>
              </el-form-item>
              <el-form-item>
                  <el-checkbox v-model="checked">不限</el-checkbox>
              </el-form-item>
          </el-form>
          <span></span>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="makeSure" :loading="submitLoading" :disabled="submitLoading">确 定</el-button>
        <el-button @click="directlyVisible = false" :disabled="submitLoading">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getList } from '@/api/truck/truckDriver.js'
  import { getGroupList,getGroupListAll } from '@/api/truck/truckGroup.js'
  import { planAddTrucks } from '@/api/transplan/transplan.js'
  export default {
    data () {
      return {
        submitLoading:false,
        groupLoading:false,
        truckListLoading:false,
        groupListLoading:false,
        directlyVisible: false,
        activeName: 'first',
        options: [],
        groupSelected:'',//选中分组
        value: '',
        input1: '',
        input2: '',
        numUnexecuted: '',
        checked: '',
        numberForm: {},
        carNumData: [],
        groupData: [],
        page: {
          pageSize: 5,
          pageNo: 1,
          total: 0
        },
        page2: {
          pageSize: 5,
          pageNo: 1,
          total: 0
        },
        currentPage1: 1,
        pageSize1: 10,
        currentPage2: 1,
        pageSize2: 4,
        selectedCarNumTags: [],    // 所有选中的carNum
        nowCarNumTableData: [],  // 当前页面的全部carNum
        selectedGroupTags: [],  // 所有选中的group
        nowGroupTableData: [],
        selectedCars: '',
        selectedGroups: '',
        planId: '',
      }
    },
    computed: {
      // getCarCurrentPageData () {
      //   this.nowCarNumTableData = this.carNumData.slice((this.currentPage1 - 1) * this.pageSize1, this.currentPage1 * this.pageSize1)
      //   return this.nowCarNumTableData
      // },
      // getGroupCurrentPageData () {
      //   this.nowGroupTableData = this.groupData.slice((this.currentPage2 - 1) * this.pageSize2, this.currentPage2 * this.pageSize2)
      //   return this.nowGroupTableData
      // }
    },
    methods: {
      init (method, row) {
        if (method === 'execPlanCar') {
          this.planId = row
          this.directlyVisible = true
        }
      },
      handleCarNumSizeChange () {
      },
      handleGroupSizeChange () {
      },
        handleChange (value) {
            // console.log(value);
        },
      handleCarNumCurrentChange (e) {
        this.page.pageNo = e
        this.getTruckList(this.page)
        this.setSelectRow('carNum')
      },
      handleGroupCurrentChange (e) {
        this.page2.pageNo = e
        this.getTruckGroupList(this.page2)
        this.setSelectRow('group')
      },
        getRowKeys (row) {
            return row.id
        },
        handleSelect (selection, mode) {
            const nowTotalSelected = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
            this[nowTotalSelected] = selection
        },

      // 点击checkbox时如果未选中，则增加到selectedCarNumTags，如果是取消选中状态，则将selectedCarNumTags中的元素删除
      // handleCheckBoxSelect (selection, row, mode) {
      //   const nowTotalSelected = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
      //   const nowSelectedIndex = this[nowTotalSelected].indexOf(row)
      //   if (nowSelectedIndex === -1) {
      //     this[nowTotalSelected].push(row)
      //   } else {
      //     this[nowTotalSelected].splice(nowSelectedIndex, 1)
      //   }
      // },
      // 选中全选按钮
      // handleSelectAll (selection, mode) {
      //   const totalSelectedTags = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
      //   const nowTableData = 'now' + mode.replace(mode[0], mode[0].toUpperCase()) + 'TableData'
      //   let modeNow
      //   if (mode === 'carNum') {
      //     modeNow = 'truckNumber'
      //   } else if (mode === 'group') {
      //     modeNow = 'names'
      //   }
      //   const allSelected = this.currentPageAllSelected(this[totalSelectedTags], this[nowTableData], modeNow)
      //   if (!allSelected) {
      //     console.log(123)
      //     selection.forEach(item => {
      //       if (this[totalSelectedTags].indexOf(item) === -1) {
      //         this[totalSelectedTags].push(item)
      //       }
      //     })
      //   } else {
      //     this[nowTableData].forEach(item => {
      //       const indexCurrnet = this[totalSelectedTags].indexOf(item)
      //       if (indexCurrnet !== -1) {
      //         this[totalSelectedTags].splice(indexCurrnet, 1)
      //       }
      //     })
      //   }
      // },
        // 关闭标签
        handleClose (tag, mode) {
            const tableName = mode + 'Table'
            if(mode){
                const totalSelectedTags = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
            this[totalSelectedTags].splice(this[totalSelectedTags].indexOf(tag), 1)
            }
            if(tag){
                this.$refs[tableName].toggleRowSelection(tag)
            }

        },
      // 取消已选中的tag，去掉对应项的选中状态
      // handleClose (tag, mode) {
      //   const dataName = mode + 'Data'
      //   const tableName = mode + 'Table'
      //   let modeNow
      //   if (mode === 'carNum') {
      //     modeNow = 'truckNumber'
      //   } else if (mode === 'group') {
      //     modeNow = 'names'
      //   }
      //   this[dataName].forEach((item, index) => {
      //     if (item[modeNow] === tag[modeNow]) {
      //       this.$refs[tableName].toggleRowSelection(this[dataName][index], false)
      //     }
      //   })
      //   const totalSelectedTags = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
      //   const indexOfClose = this[totalSelectedTags].indexOf(tag)
      //   this[totalSelectedTags].splice(indexOfClose, 1)
      // },

      setSelectRow (mode) {
        const totalSelectedTags = 'selected' + mode.replace(mode[0], mode[0].toUpperCase()) + 'Tags'
        if (!this[totalSelectedTags] || this[totalSelectedTags].length <= 0) {
          return
        }
        const tableName = mode + 'Table'
        this.$refs[tableName].clearSelection()
        const dataName = mode + 'Data'
        for (var i = 0; i < this[dataName].length; i++) {
          if (this[totalSelectedTags].indexOf(this[dataName][i]) >= 0) {
            // 设置选中，记住table组件需要使用ref="table"
            this.$refs[tableName].toggleRowSelection(this[dataName][i], true)
          }
        }
      },

      currentPageAllSelected (totalSelected, currentPageDate, mode) {
        let currentPageContent = []
        currentPageDate.forEach(item => {
          currentPageContent.push(item[mode])
        })
        return currentPageContent.every(val => totalSelected.includes(val))
      },
      //搜索车辆
      handleTruckSearch(){
        this.$set(this.page,'pageNo',1)
        this.getTruckList(this.page)
      },
      getTruckList () {
        this.truckListLoading=true;
        let params=this.page;
        getList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          truckNumber:this.input1,
          truckGroup:this.groupSelected
        }).then((res) => {
          this.truckListLoading=false;
          if (res.data.code === '200') {
            let result=res.data.result;
            this.carNumData = result.list
            this.page.total = result.count
          }
        })
      },
      getTruckGroupList () {
        this.groupListLoading=true;
        let params=this.page2;
        getGroupList({
          pageSize: params.pageSize,
          pageNo: params.pageNo
        }).then((res) => {
          this.groupListLoading=false;
          if (res.data.code === '200') {
            this.groupData = res.data.result.list
            this.page2.total = res.data.result.count
          }
        })
      },
      //选择分组-获取分组列表（模糊搜索&不分页）
      getGroupListByNames(){
        this.groupLoading=true;
      	getGroupListAll({
          names:''
      	}).then((res) => {
          this.groupLoading=false;
          if (res.data.code === '200') {
            this.options=res.data.result||[]
          }
        })
      },
      //选择分组
      handleGroupSelection(e){
        this.groupSelected=e;
        this.handleTruckSearch()
      },
      handleClick (tab, event) {
        if (tab.index === '1') {
          this.getTruckGroupList(this.page2)
        }
        if (tab.index === '0') {
          this.getTruckList(this.page)
        }
      },
      makeSure () {
        this.selectedCars = ''
        this.selectedGroups = ''
        this.selectedCarNumTags.forEach(row => {
          this.selectedCars += (row.id + ',')
        })
        this.selectedGroupTags.forEach(row => {
          this.selectedGroups += (row.id + ',')
        })
        if(this.checked){
            this.numUnexecuted = 0
        }
        this.submitLoading=true;
        planAddTrucks({
          planId: this.planId,
          truckIds: this.selectedCars,
          groupIds: this.selectedGroups,
          numUnexecuted: this.numUnexecuted
        }).then(({data}) => {
          this.submitLoading=false;
          this.selectedCarNumTags=[]
          this.selectedGroupTags=[]
          if (data.code === '200') {
            this.$message({
              type: 'success',
              message: data.message
            })
            this.$emit('refreshDataList')
          }else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
          this.directlyVisible = false
        })
      }
    },
    mounted () {
      this.getGroupListByNames()
      this.getTruckList()
      this.getTruckGroupList()
    }
  }
</script>

<style lang="scss" scoped>
  .directly-wrapper{
    p{
      margin: 0;
    }
    ::v-deep.el-dialog{
      width: fit-content;
      .el-dialog__header{
        padding: 0 20px !important;
        height: 41px;
        line-height: 41px;
      }

      .el-dialog__headerbtn{
        top: 11px;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #333333;
      }
      .el-dialog__body{
        padding-top: 0 !important;
        .directly-content{
          display: flex;

          .content-left{
            .content-left-header{
              .el-tabs__header{
                margin-bottom: 10px;

                .el-tabs__item{
                  /*padding: 0 10px;*/
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                }
                /*.el-tabs__active-bar{
                  left: -10px;
                  width: 84px !important;
                }
                .el-tabs__nav-wrap::after{
                  width: 168px;
                }*/
              }
              .el-tabs__content{
                .el-input.el-input--suffix {
                  height: 32px;
                  input {
                    height: 32px;
                    border: 1px solid #AAAAAA;
                    border-radius: 4px;
                    color: #333333;
                    padding: 0 10px !important;
                  }

                  input:hover, input:focus {
                    border-color: #1890ff;
                  }

                  .el-input__inner::-webkit-input-placeholder {
                    color: #999999;
                  }
                }
                .el-input__icon{
                  line-height: 32px;
                }
                .el-table {
                  width: 446px !important;
                  th{
                    height: 36px;
                    padding: 0;
                  }
                  th:last-child .cell,td:last-child .cell{
                    padding: 0 !important;
                  }
                  tr.el-table__row--striped td{
                    background: #F7F7F7;
                  }
                  /*.el-table__row{*/
                  /*  td{*/
                  /*    padding: 0;*/
                  /*  }*/
                  /*  td:first-child .cell{*/
                  /*    text-align: center;*/
                  /*  }*/
                  /*  .cell{*/
                  /*    font-size: 16px;*/
                  /*    font-family: Microsoft YaHei;*/
                  /*    font-weight: 400;*/
                  /*    color: #333333;*/
                  /*    padding: 3px 20px;*/
                  /*    line-height: 34px;*/

                  /*  }*/
                  /*}*/
                }
              }
              .select-car{
                .select-car-search{
                  display: flex;
                  margin-bottom: 10px;

                  .el-select{
                    width: 150px !important;
                    .el-input .el-select__caret{
                      color:#666666;
                      font-size: 16px;
                      line-height: 32px;
                    }
                    .el-input.el-input--suffix{
                      input{

                      }
                    }
                  }
                  .search-num{
                    width: 285px;
                    margin-left: 10px;
                    input{

                    }

                  }
                }
              }
              .select-group{
                .select-group-search{
                  margin-bottom: 10px;
                  .el-input{
                    width: 290px;
                  }
                }
              }
            }
          }
          .content-right{
            margin-left: 34px;
            margin-top: 10px;

            .selected-car{
              .el-tag{
                background: #1890FF;
              }
            }
            .selected-group{
              .el-tag,.el-tag__close:hover{
                background: #F59A23;
              }
            }
            .selected-detail{
              width: 491px;
              height: 147px;
              background: #FFFFFF;
              border: 1px solid #DDDDDD;
              box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.1);
              border-radius: 4px;
              overflow-y: auto;
              margin-top: 9px;
              padding: 11px;

              .el-tag{
                width: 106px;
                height: 26px;
                border-radius: 4px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 26px;
                /*position: relative;*/
                .el-tag__close{
                  color: #ffffff;
                }
                .el-icon-close{
                  right: 0;
                  /*position: absolute;*/
                  /*top: 5px;*/
                }
              }
              .el-tag+.el-tag{
                margin-left: 8px;
                margin-bottom: 8px;
              }
              .el-tag:nth-child(4n+1){
                margin-left: 0;
              }
            }
            .selected-group{
              margin-top: 30px;
            }
          }
        }
          .bottom-form{
              text-align: center;
              margin-top: 30px;
              .el-form-item:first-child{
                  margin-right: 15px;
              }
          }

      }


    }
  }
</style>
